<template>

    <div class="center-box">
        <div class="onSell-content-box clear-fix">
            <div class="onSell-content-item float-left" v-for="(item,index) in contentList" :key="index">
                <a :href="item.coupon_click_url" target="_blank">
                    <div class="onSell-item-cover">
                        <el-image
                                style="width: 263px; height: 263px"
                                :src="item.pict_url + '_270x270xzq90.jpg_.webp'"
                                fit="cover">

                            <div class="onSell-off-price">
                                {{item.coupon_amount}}
                            </div>
                        </el-image>
                    </div>

                    <div class="onSell-item-prise">
                        <span class="onSell-item-final-price" v-text="'￥' + item.zk_final_price"></span>
                        <span>
                        劵后价：
                        <span v-text="to2Bit(item.zk_final_price-item.coupon_amount)"></span>
                    </span>
                    </div>

                    <div class="onSell-item-volume">
                        <span v-text="item.volume"></span>
                        人已购买
                    </div>

                    <div class="onSell-item-title">
                        <p v-text="item.title"></p>
                    </div>
                </a>
            </div>
        </div>
        <div class="onSell-page-loading"
             v-loading="isLoading"
             element-loading-text="拼命加载中">

            <p v-if="!hasMoreData" style="text-align: center; color: blueviolet;line-height: 100px">没有跟多内容了...</p>
        </div>
    </div>
</template>

<script>

    import api from "../../utils/api";

    export default {
        data() {
            return {
                isLoading: false,
                mCurrentPage: 1,
                hasMoreData: true,
                contentList: null
            }
        },

        asyncData() {
            return api.getOnSellContent(1).then(result => {
                console.log(result);

                if (result.code === api.SUCCESS_CODE) {
                    let contentList = result.data.tbk_dg_optimus_material_response.result_list.map_data;

                    return {contentList};
                }
            });
        },
        mounted() {
            // initListener
            window.addEventListener("scroll", this.onScroll);

            // initView
            this.$store.commit('setCurrentActive', 'onSell');
        },
        methods: {
            to2Bit(num) {
                return num.toFixed(2);
            },
            onScroll() {

                let contentBox = document.getElementsByClassName("onSell-content-box");

                let contentBoxHeight = contentBox[0].offsetHeight - document.documentElement.clientHeight + 90;

                let dy = document.documentElement.scrollTop;


                if (dy >= contentBoxHeight && this.isLoading === false && this.hasMoreData) {
                    // TODO: 触发一次加载更多
                    this.isLoading = true;

                    this.loadMore();
                }
            },
            loadMore() {
                this.mCurrentPage++;

                this.loadData();
            },
            loadData() {
                api.getOnSellContent(this.mCurrentPage).then(result => {
                    // check env
                    if (result.code === api.SUCCESS_CODE) {
                        // 添加新数据到末尾

                        // check data
                        let newData;
                        try {
                            newData = result.data.tbk_dg_optimus_material_response.result_list.map_data;
                        } catch (e) {
                            newData = {}
                        }
                        // complete data
                        this.contentList = this.contentList.concat(newData);


                        // change flag state
                        // 判断是否还有数据，没有则不能加载更多了
                        console.log(result);
                        console.log(newData.length);
                        if (newData.length !== 52) {
                            this.hasMoreData = false;
                        }
                        this.isLoading = false;
                    } else {
                        // 加载失败
                        // change flag state
                        this.isLoading = false;
                        this.mCurrentPage--;
                    }
                });
            }
        }
    }
</script>

<style>
    .onSell-item-volume {
        font-size: 14px;
        color: #7f828b;
        line-height: 30px;
        margin-bottom: 10px;
    }

    .onSell-item-prise {
        margin-bottom: 10px;
        color: #F40;
        line-height: 30px;
        font-size: 18px;
    }

    .onSell-content-box {
        margin-top: 20px;
        margin-bottom: 20px;
    }

    .onSell-item-cover {
        position: relative;
        margin-bottom: 10px;
    }

    .onSell-off-price {
        position: absolute;
        top: 0;
        right: 0;
        background: #c9302c;
        color: white;
        padding: 4px 18px;
        font-size: 14px;
        text-align: center;
        height: 30px;
        line-height: 30px;
    }

    .onSell-item-title {
        font-size: 16px;
        min-height: 43px;
        font-weight: 600;
        color: black;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
    }

    .onSell-content-item:hover {
        border: #c9302c solid 1px;
    }

    .onSell-content-item > a {
        text-decoration: none;
    }

    .onSell-content-item {
        text-decoration: none;
        cursor: pointer;
        width: 275px;
        margin: 5px;
        padding: 5px;
        border: #dfdfdf 1px solid;
    }

    .onSell-item-final-price {
        text-decoration: line-through;
    }

    .onSell-page-loading {
        width: 100%;
        margin-bottom: 20px;
        box-shadow: 0 5px 10px #d4d4d4;
        height: 100px;
    }
</style>